<template>
    <div id="x6-container2" style="min-height: 500px"></div>
</template>
<script>
import { defineComponent, onMounted } from "vue";
import { Graph } from "@antv/x6";

export default defineComponent({
  setup() {
    onMounted(() => {
      const graph = new Graph({
        container: document.getElementById("x6-container2"),
        grid: true,
      });

      // row 1
      // -----
      graph.addNode({
        x: 40,
        y: 40,
        width: 120,
        height: 60,
        label: "rect",
      });

      graph.addNode({
        x: 200,
        y: 40,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            fill: "#efdbff",
            stroke: "#9254de",
          },
        },
      });

      graph.addNode({
        x: 360,
        y: 40,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            stroke: "#237804",
            fill: "#73d13d",
            rx: 10,
            ry: 10,
          },
        },
      });

      graph.addNode({
        x: 520,
        y: 40,
        width: 60,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            stroke: "#ffa940",
            fill: "#ffd591",
            rx: 10,
            ry: 10,
          },
        },
      });

      // row 2
      // -----

      graph.addNode({
        x: 40,
        y: 140,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          label: {
            refX: 8,
            refY: 8,
            textAnchor: "start",
            textVerticalAnchor: "top",
          },
        },
      });

      graph.addNode({
        x: 200,
        y: 140,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            fill: "#efdbff",
            stroke: "#9254de",
          },
          label: {
            refX: 8,
            refY: 0.5,
            textAnchor: "start",
            textVerticalAnchor: "middle",
          },
        },
      });

      graph.addNode({
        x: 360,
        y: 140,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            stroke: "#237804",
            fill: "#73d13d",
            rx: 10,
            ry: 10,
          },
          label: {
            refX: 8,
            refY: "100%",
            refY2: -8,
            textAnchor: "start",
            textVerticalAnchor: "bottom",
          },
        },
      });

      graph.addNode({
        x: 520,
        y: 140,
        width: 60,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            stroke: "#ffa940",
            fill: "#ffd591",
            rx: 10,
            ry: 10,
          },
          label: {
            refX: 0.5,
            refY: -4,
            textAnchor: "middle",
            textVerticalAnchor: "bottom",
          },
        },
      });

      // row 3
      // -----

      graph.addNode({
        x: 40,
        y: 240,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          label: {
            refX: 0.5,
            refY: 8,
            textAnchor: "middle",
            textVerticalAnchor: "top",
          },
        },
      });

      graph.addNode({
        x: 200,
        y: 240,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            fill: "#efdbff",
            stroke: "#9254de",
          },
          label: {
            refX: 0.5,
            refY: 0.5,
            textAnchor: "middle",
            textVerticalAnchor: "middle",
          },
        },
      });

      graph.addNode({
        x: 360,
        y: 240,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            stroke: "#237804",
            fill: "#73d13d",
            rx: 10,
            ry: 10,
          },
          label: {
            refX: 0.5,
            refY: "100%",
            refY2: -8,
            textAnchor: "middle",
            textVerticalAnchor: "bottom",
          },
        },
      });

      graph.addNode({
        x: 520,
        y: 240,
        width: 60,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            stroke: "#ffa940",
            fill: "#ffd591",
            rx: 10,
            ry: 10,
          },
          label: {
            refX: "100%",
            refX2: 4,
            refY: 0.5,
            textAnchor: "start",
            textVerticalAnchor: "middle",
          },
        },
      });

      // row 4
      // -----

      graph.addNode({
        x: 40,
        y: 340,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          label: {
            refX: "100%",
            refX2: -8,
            refY: 8,
            textAnchor: "end",
            textVerticalAnchor: "top",
          },
        },
      });

      graph.addNode({
        x: 200,
        y: 340,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            fill: "#efdbff",
            stroke: "#9254de",
          },
          label: {
            refX: "100%",
            refX2: -8,
            refY: 0.5,
            textAnchor: "end",
            textVerticalAnchor: "middle",
          },
        },
      });

      graph.addNode({
        x: 360,
        y: 340,
        width: 120,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            stroke: "#237804",
            fill: "#73d13d",
            rx: 10,
            ry: 10,
          },
          label: {
            refX: "100%",
            refX2: -8,
            refY: "100%",
            refY2: -8,
            textAnchor: "end",
            textVerticalAnchor: "bottom",
          },
        },
      });

      graph.addNode({
        x: 520,
        y: 340,
        width: 60,
        height: 60,
        label: "rect",
        attrs: {
          body: {
            stroke: "#ffa940",
            fill: "#ffd591",
            rx: 10,
            ry: 10,
          },
          label: {
            refX: 0.5,
            refY: "100%",
            refY2: 4,
            textAnchor: "middle",
            textVerticalAnchor: "top",
          },
        },
      });
    });
    return {};
  },
});
</script>
